<template>
  <div class="my">
    <div class="header">
      <div class="islogin" v-if="user">
        <van-cell-group
          :border='false'
        >
          <van-cell center class="loginImg" :border='false'>
            <template #icon>
              <van-image
                width="60"
                height="60"
                fit="cover"
                round
                @error="loginError"
                src="https://iconfont.alicdn.com/t/d0388173-59ec-4f22-a7c7-53097a172079.png"
              />
            </template>
            <template #title>{{userInfo.name}}</template>
            <template>修改信息</template>
          </van-cell>
          <van-cell :border='false'>
            <van-grid :border='false'>
              <van-grid-item icon="photo-o" text="文章">
                <template #icon>{{userInfo.art_count}}</template>
              </van-grid-item>
              <van-grid-item icon="photo-o" text="粉丝">
                <template #icon>{{userInfo.fans_count}}</template> </van-grid-item
              ><van-grid-item icon="photo-o" text="点赞">
                <template #icon>{{userInfo.like_count}}</template> </van-grid-item
              ><van-grid-item icon="photo-o" text="关注">
                <template #icon>{{userInfo.follow_count}}</template>
              </van-grid-item>
            </van-grid>
          </van-cell>
          <van-cell :border='false'>
            <van-grid clickable :column-num="2" :border='false'>
              <van-grid-item icon="star-o" text="收藏" class="star" />
              <van-grid-item icon="underway-o" text="历史" />
            </van-grid>
          </van-cell>
          <van-cell is-link>xinxi</van-cell>
          <van-cell is-link>xinxi</van-cell>
          <van-cell>
            <van-button type="info" plain block @click="outLogin">退出</van-button>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="nologin" v-else>
        <van-cell-group :border='false'>
          <van-cell :border='false' to="/login">
            <van-grid clickable :column-num="1" :border='false'>
              <van-grid-item  :border='false'>
                <template #icon>
                  <van-image
                    width="80"
                    height="80"
                    round
                    src="https://iconfont.alicdn.com/t/33682cc7-4b54-4922-9dfc-749f00145a9e.png"
                  />
                </template>
                <template #text>登陆</template>
              </van-grid-item>
            </van-grid>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import {getMy} from '@/api/user'
export default {
  data(){
    return{
        userInfo:{
          name:'',
          photo:"",
          art_count:"",
          fans_count:"",
          follow_count:"",
          like_count:"",
        }
    }
  },
  created(){
    this.getMyInfo()
  },
  computed:{
    ...mapState(['user'])
  },
  methods:{
    outLogin(){
      this.$store.commit('setUser',null)
    },
    loginError(){
      console.log('logo加载失败')
    },
    getMyInfo(){
      if(this.user){
        getMy().then(res=>{
        console.log(res.data)
        this.userInfo = res.data.data
      }).catch(err=>{
        console.log(err)
      })
      }
      
    }
  }
  
}
</script>

<style lang="less" scoped>
/deep/ .islogin{
  //height: 250px;
  background-image: url('https://iconfont.alicdn.com/s/e160aa52-13f8-4682-9906-38cb057251dc_origin.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  .loginImg{
    padding-top: 40px;
  };
  .van-cell-group{
    background: unset;
    .van-cell{
      background: unset;
    };
    .van-grid-item__content{
      background: unset;
    }

  }
  .van-cell__title{
    margin-left:10px ;
  }
  .star{
    .van-grid-item__content--clickable{
      color:red
    }
  }
};
/deep/.nologin{
    padding-top: 250px;
    background-image: url('https://iconfont.alicdn.com/s/695c8e18-dcd1-4adc-930f-971a1b38a77e_origin.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    .van-cell-group{
    background: unset;
    .van-cell{
      background: unset;
    };
    .van-grid-item__content{
      background: unset;
    }
    .van-image{
      padding:5px;
    }
    .van-grid-item__text{
      font-size: 20px;
    }

  }
    
  }

</style>